<template>
	<view>
		<view class="paper-list" @tap="openChatroom()">
			<view class="paper-list-left">
				<image :src="item.src" mode="widthFix" lazy-load></image>
			</view>
			<view class="paper-list-right">
				<view class="paper-list-header">
					<view class="flex-sp-ac">
						<view style="font-size: 35rpx;font-weight: bold;">{{item.nikName}} </view>
						<view style="margin-right: 20rpx; color: #C0C0C0;">{{item.time}}</view>
					</view>
				</view>
				<view class="paper-list-title flex-sp-ac">
					<view>
						{{item.detail}}
					</view>
					<view class="paper-list-news">
						<template v-if="item.newsNum>0">
							<uni-badge :text="item.newsNum" type="error" style="width: 35rpx;margin-right: 20rpx;"></uni-badge>
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniBadge from "../../components/uni-badge/uni-badge.vue";
	export default {
		components: {
			uniBadge
		},
		name: "paper-list",
		props: {
			item: Object
		},
		data() {
			return {

			};
		},
		methods:{
			openChatroom() {
				uni.navigateTo({
					url:'../../pages/chatroom/chatroom'
				});
			}
		}
	}
</script>

<style scoped>
	.paper-list {
		padding: 20rpx 0rpx 5rpx 20rpx;
		display: flex;
		border-bottom: 1rpx solid #F2F2F2;
	}

	.paper-list-left {
		flex-shrink: 0;
		/*不会被压缩*/
	}

	.paper-list-left image {
		width: 90rpx;
		height: 90rpx;
		border-radius: 100%;
	}

	.paper-list-right {
		/* border: 1px solid; */
		margin-left: 15rpx;
		flex: 1;
		/*占据剩余的所有空间*/
		padding-bottom: 15rpx;
	}

	.paper-list-header>view:nth-child(1) text {
		color: #000000;
		font-size: 35rpx;
		font-weight: bold;
	}

	.paper-list-title {
		color: #888888;
	}

	/* .paper-list-news {
		background-color: #ff6434;
		color: #FFFFFF;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		text-align: center;
		margin-right: 20rpx;
	} */
</style>
